<template>
	<view class="invite-box">


		<view class="invite-center">
			<view class="tab">
				<u-tabs :list="list"
					bar-width="88"
					:current="current"
					:is-scroll="false"
					@change="change"
					active-color="#242424"
					inactive-color="#999999">
				</u-tabs>
			</view>
			
			<view class="center-box2">
				<view class="center-tab ">
					<block v-for="(item, index) in 1" :key="index" v-if="current == 0">
						<view class="h30">
						</view>
						<view
							class="flex justify-between r10 align-center h182 box-pad"
							style="background-color: #FFFFFF;">
							<view class="flex align-center">
								<image src="../../static/img.jpg" class="w90 h90 r45" mode=""></image>
								<view class="ml29">
									<view class="flex align-center">
										<view class="mr25" style="font-weight: 600;">
											酱酱
										</view>
										<view class="f20 bgc-border">
											公爵
										</view>
										<view class="mr14 ml19">
											<image src="../../static/vip/zs.png" class="w110 h30" mode=""></image>
										</view>
									</view>
									<view class="f24 mt21 flex mb18">
										<text style="color: #666666;">4月5日</text>
										<view class="ml25 pad-bgc">
											密室桌游
										</view>
									</view>
									<view class="f20">
										<i class="cuIcon-locationfill mr14"
											style="color: #999999;">
										</i>
										<text style="color: #333;">科华北路48号</text>
									</view>
								</view>
							</view>
							<view class="bgc-width">
								已申请
							</view>
						</view>
						
						
						
						<view class="h30">
						</view>
						<view
							class="flex justify-between r10 align-center h182 box-pad"
							style="background-color: #FFFFFF;">
							<view class="flex align-center">
								<image src="../../static/img.jpg" class="w90 h90 r45" mode=""></image>
								<view class="ml29">
									<view class="flex align-center">
										<view class="mr25" style="font-weight: 600;">
											酱酱
										</view>
										<view class="f20 bgc-border">
											公爵
										</view>
										<view class="mr14 ml19">
											<image src="../../static/vip/zs.png" class="w110 h30" mode=""></image>
										</view>
									</view>
									<view class="f24 mt21 flex mb18">
										<text style="color: #666666;">4月5日</text>
										<view class="ml25 pad-bgc">
											密室桌游
										</view>
									</view>
									<view class="f20">
										<i class="cuIcon-locationfill mr14"
											style="color: #999999;">
										</i>
										<text style="color: #333;">科华北路48号</text>
									</view>
								</view>
							</view>
							<view class="bgc-width-border">
								私聊
							</view>
						</view>
					</block>
					
					
					
					
					<block v-for="(item, index) in 1" :key="index" v-else>
						<view class="h30">
						</view>
						<view
							class="flex justify-between r10 align-center h182 box-pad"
							style="background-color: #FFFFFF;">
							<view class="flex align-center">
								<image src="../../static/img.jpg" class="w90 h90 r45" mode=""></image>
								<view class="ml29">
									<view class="flex align-center">
										<view class="mr25" style="font-weight: 600;">
											酱酱
										</view>
									</view>
									<view class="f24 mt21 flex mb18">
										<text style="color: #666666;">4月5日</text>
										<view class="ml25 pad-bgc">
											密室桌游
										</view>
									</view>
									<view class="f20">
										<i class="cuIcon-locationfill mr14"
											style="color: #999999;">
										</i>
										<text style="color: #333;">科华北路48号</text>
									</view>
								</view>
							</view>
							
							<!-- 只有自己的发起的邀约可以进行人员管理 -->
							<view class="bgc-width-border" @click="l.to('/pages/home/signList')">
								管理
								<view class="radio-box">
									
								</view>
							</view>
						</view>
					</block>
					
					
					
				</view>
				
			</view>

		</view>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '我的申请'
				}, {
					name: '我的管理'
				}],
				current: 1,
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100vh;
		background-color: #F7F5F7;
	}
	.invite-box {

		.invite-center {}
		
		.center-box2 {
			width: 100%;
			height: 100%;
			background-color: #F7F5F7;
			
			.center-tab {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				background-color: #F7F5F7;
				
				.box-pad {
					padding: 0 30rpx;
				}
				
				.bgc-border {
					color: #40C6A8;
					padding: 5rpx 11rpx;
					border-radius: 30rpx;
					border: 1rpx solid #40C6A8;
				}
				
				.pad-bgc {
					color: #2984F5;
					font-size: 20rpx;
					border-radius: 4rpx;
					padding: 6rpx 9rpx;
					background-color: #F2F6FF;
				}
				
				.bgc-width {
					color: #666666;
					font-size: 24rpx;
					border-radius: 30rpx;
					padding: 13rpx 29rpx;
					background-color: #F5F5F5;
				}
				
				.bgc-width-border {
					color: #666666;
					font-size: 24rpx;
					border-radius: 30rpx;
					padding: 13rpx 29rpx;
					border: 1rpx solid #333333;
					position: relative;
					
					.radio-box {
						position: absolute;
						width: 10rpx;
						height: 10rpx;
						right: 5rpx;
						top: 5rpx;
						border-radius: 5rpx;
						background-color: red;
					}
				}
			}
		}
	}
</style>
